<template>
    <div class="riqi1">
            <span class="demonstration">开始时间:</span>
            <el-date-picker v-model="startDate" type="date" placeholder="选择日期"  >
            </el-date-picker>
            <span class="demonstration">至结束时间:</span>
            <el-date-picker v-model="endDate" type="date" placeholder="选择日期" >
            </el-date-picker>
            <el-button type="warning" plain  class="riqisubmit">查询</el-button>
            <el-button type="warning" plain  class="riqisubmit">导出节目排名报表</el-button>
        </div>
    <!-- --------------------------------------------------------------------tab---------------------------------------------------------------------------------------------- -->

    <div>
        <div class="v-table" ref="tableheight" style="width: 100%; height:650px">
            <el-table :data="testEntity" style="width:100%; height:630px" border stripe>
                <el-table-column lable="序号" type="index" width="50" fixed>
                </el-table-column>
                <el-table-column label="原始编号" width="260" fixed>
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span class="span1">{{ scope.row.originOrderNo }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订单编号" width="260" fixed>
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.orderNo }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="省份" width="100">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.province }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="交易状态" width="90">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.tradeStatus }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="付款时间" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.payDate }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="网店名称" width="160">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.storeName }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" width="300" class="xishu">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.productName }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="数量" width="60" class="xishu">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.productNum }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="明细金额" width="100" class="xishu">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.orderPrice }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="推广链接" width="400" class="xishu">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.promotionLink }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="二级页" width="220" class="xishu">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.secondaryPage }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="分销" width="180" class="xishu">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.distribution }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="统计结果" width="180" class="xishu">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.statisticalResults }}</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
    
<script>
import axios from '../api/index'
export default {
    data() {
        return {
            startDate: '',
            endDate: '',
            testEntity: []
        }
    },
    methods: {
        //下载文件
        downloadFile(res, fileName) {
            let blob = new Blob([res.data]); //res为从后台返回的数据
            //let blob = new Blob([res]); 
            if (!fileName) {
                fileName = res.headers['content-disposition'].split('filename=').pop();
            }
            if ('msSaveOrOpenBlob' in navigator) {
                window.navigator.msSaveOrOpenBlob(blob, fileName);
            } else {
                const elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href);
                document.body.removeChild(elink);
            }
        }
    },
    mounted() {
        var today = new Date();
        var year = today.getFullYear();//获取年份
        var month = today.getMonth() + 1;//获取月份
        var day = today.getDate();//获取日期
        // var minToday = year + "-" + month + "-" + day + " " + "00:00:00";
        var maxToday = year + "-" + month + "-" + day + " " + "23:59:59";

        let beforeTime = new Date(today.getTime() - 24 * 60 * 60 * 1000 * 30); //一个月前
        var lastYear = beforeTime.getFullYear();
        var lastMonth = beforeTime.getMonth() +1;
        var lastDay = beforeTime.getDate();
        var minToday = lastYear + "-" + lastMonth + "-" + lastDay + " " + "00:00:00";
        this.startDate = minToday   
        this.endDate = maxToday

       
    }
}
</script>
    
<style>
.font {
    width: 120px;
    font-size: 13px;
    margin-top: 20px;
    margin-left: 5px;
    height: 20px;
}

.file {
    display: flex; 
}
.riqi1 {
   margin-top: 14px;
   margin-left: 60px;
    font-size: 14px;
    display:flex;
    padding-left: 25%;
    width: 900px;
    height: 50px;
    line-height: 28px;
}
.filea{
    display:flex;
}

.daochu1,.daochu2,.daochu3{
   margin-left: 1%;
}

.cell {
    width: 350px;
    text-align: left;
}
.block-box {
    width: 100%;
    height: 50px;
    margin-top: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-pagination {
    height: 80px;
    align-items: center;

}
.daochu {
    margin-top: 14px;
    margin-left: 10%; 
    display: flex;
}
.shangchuan {
    padding-top: 6px;
    margin-top: 8px;
}
.demo-ruleForm{
    width: 0px;
    margin-left: -90px;
    margin-top: 6px;
}
.riqisubmit{
    margin-left: 10px;
}
</style>